import React, { Component } from 'react';
import { Row, Col, Form, Input, Button, Modal, Upload, message, Space } from "antd"
import { ServerIP } from '@utils/request';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

class AddMessage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visable: false,
            editorState: null

        }
        this.refform = React.createRef()
    }
    render() {
        const { editorState } = this.state
        const excludeControls = ['link'];
        const myUploadFn = param => {
            const serverURL = `${ServerIP}/web/rest/FileUploadAndDownload/uploadForumPostPicture`;
            const xhr = new XMLHttpRequest();
            const fd = new FormData();

            const successFn = e => {
                // console.log(JSON.parse(xhr.responseText));
                param.success({
                    url: `${ServerIP}${JSON.parse(xhr.responseText).response.message}`,
                    meta: {
                        alt: '图片',
                        width: '100% !important',
                        style: {
                            width: '100% !important',
                            maxWidth: '80vw',
                        }
                    },
                });
            };

            const progressFn = event => {
                param.progress((event.loaded / event.total) * 100);
            };

            const errorFn = () => {
                param.error({
                    msg: '无法上传!',
                });
            };

            xhr.upload.addEventListener('progress', progressFn, false);
            xhr.addEventListener('load', successFn, false);
            xhr.addEventListener('error', errorFn, false);
            xhr.addEventListener('abort', errorFn, false);

            fd.append('file', param.file);
            fd.append('id', this.props.key1);
            xhr.open('POST', serverURL, true);
            xhr.send(fd);
        };
        return (
            <Row>
                <Col span={24}>
                    <Form
                        onFinish={this.onFinish}
                        ref={this.refform}
                    >
                        <Form.Item
                            label='标题'
                            name='title'
                            rules={[
                                { required: true, message: '请输入帖子标题' }
                            ]}
                        >
                            <Input placeholder='请输入帖子标题' />
                        </Form.Item>
                        <Form.Item
                            label='内容'
                            name='content'
                            rules={[
                                { required: true, message: '请输入帖子内容' }
                            ]}
                        >
                            <BraftEditor
                                value={editorState}
                                excludeControls={excludeControls}
                                media={{ uploadFn: myUploadFn, externals: false }}
                                onChange={this.handleEditorChange}
                                imageResizable={true}
                                style={{ height: "40vh" }}

                            />
                        </Form.Item>
                        <Form.Item >
                            <Space style={{ float: "right" }}>
                                <Button type='primary' ghost htmlType='submit' >发布</Button>
                                <Button danger onClick={this.reset}>重置</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        );
    }
}
export default AddMessage;